// pages/System/SystemInfo.tsx
import React, { useEffect, useState } from 'react';
import { useApp } from '../../App';
import { connectionService } from '../../services/connections';
import type { SystemInfo as SystemInfoType } from '../../types/api';

const SystemInfo: React.FC = () => {
  const { currentConnection } = useApp();
  const [systemInfo, setSystemInfo] = useState<SystemInfoType | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (currentConnection) {
      fetchSystemInfo();
    }
  }, [currentConnection]);

  const fetchSystemInfo = async () => {
    if (!currentConnection) return;

    setLoading(true);
    setError(null);

    try {
      const info = await connectionService.getSystemInfo(currentConnection);
      setSystemInfo(info);
    } catch (err) {
      setError('Failed to fetch system information');
      console.error('Failed to fetch system info:', err);
    } finally {
      setLoading(false);
    }
  };

  if (!currentConnection) {
    return (
      <div className="text-center py-12">
        <p className="text-lg text-gray-400 mb-4">No connection selected</p>
      </div>
    );
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500"></div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="text-center py-8">
        <p className="text-red-500 mb-4">{error}</p>
        <button
          onClick={fetchSystemInfo}
          className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
        >
          Retry
        </button>
      </div>
    );
  }

  if (!systemInfo) {
    return (
      <div className="text-center py-8">
        <p className="text-gray-500">No system information available</p>
      </div>
    );
  }

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-bold">System Information</h2>
        <button
          onClick={fetchSystemInfo}
          className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
        >
          Refresh
        </button>
      </div>

      <div className="grid gap-6">
        <div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
          <h3 className="text-lg font-semibold mb-4">Connection Details</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <p className="text-sm text-gray-500 mb-1">Connection Name</p>
              <p className="font-medium">{currentConnection}</p>
            </div>
            <div>
              <p className="text-sm text-gray-500 mb-1">URI</p>
              <p className="font-medium font-mono text-sm">{systemInfo.uri}</p>
            </div>
          </div>
        </div>

        <div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
          <h3 className="text-lg font-semibold mb-4">System Information</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <p className="text-sm text-gray-500 mb-1">Hostname</p>
              <p className="font-medium">{systemInfo.hostname}</p>
            </div>
            <div>
              <p className="text-sm text-gray-500 mb-1">Libvirt Version</p>
              <p className="font-medium">{systemInfo.libvirt_version}</p>
            </div>
            <div>
              <p className="text-sm text-gray-500 mb-1">Hypervisor Version</p>
              <p className="font-medium">{systemInfo.hypervisor_version}</p>
            </div>
          </div>
        </div>

        <div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
          <h3 className="text-lg font-semibold mb-4">System Capabilities</h3>
          <div className="space-y-4">
            <div>
              <p className="text-sm text-gray-500 mb-2">Supported Features</p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                  <span className="text-sm">Virtual Machine Management</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                  <span className="text-sm">Storage Pool Management</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                  <span className="text-sm">Network Management</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                  <span className="text-sm">Console Access</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SystemInfo;